<ui:composition template="../template/templateSGRUsuario.xhtml"  xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui">
    <ui:define name="index">
        <h:form id="index">
            <ui:param name="duracionparam" value="7000" />

            <p:growl id="growldel#{nombreparam}" widgetVar="wvgrowldel#{nombreparam}"
                     autoUpdate="false" showDetail="false" life="#{duracionparam}" />

            <article id="content">
                <div class="wrap">
                    <div class="box">
                        <div>
                            <h2 class="letter_spacing">Envíanos tu <span>Consulta</span></h2>
                            <div style="border: 0px; width: 50%; float: left;">
                                <h:panelGrid columns="2" styleClass="externo">

                                    <h:outputLabel value="(*)Tu Nombre:"/>
                                    <h:column>
                                        <p:inputText style="margin-bottom: 5px; width: 280px;" value="#{pCContactenos.nombre}" id="nombre" required="true" requiredMessage="El campo Nombre es obligatrio" />
                                    </h:column>

                                    <h:outputLabel value="(*)Tu Email:"/>
                                    <h:column>
                                        <p:inputText style="margin-bottom: 5px; width: 280px;" required="true" id="mail" value="#{pCContactenos.correo}"
                                                     requiredMessage="El campo Correo es obligatrio" validatorMessage="El campo Email no es v&#225;lido. Ejemplo: ejemplo@algo.com"> 
                                            <f:validateRegex pattern="[\w\.-]*[a-zA-Z0-9_]@[\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]" />
                                        </p:inputText>
                                    </h:column>

                                    <h:outputLabel value="(*)Tu Mensaje:"/>
                                    <h:column>
                                        <p:inputTextarea rows="5" id="msj" value="#{pCContactenos.mensaje}" 
                                                         maxlength="255" cols="35" required="true" 
                                                         requiredMessage="El campo Mensaje es obligatrio"
                                                         counterTemplate="{0} caracteres restantes" counter="contador"
                                                         style="margin-bottom: 5px; width: 280px;" autoResize="false" />
                                        <h:panelGroup layout="block" id="x1">
                                            <h:outputText id="contador" style="font-size: 10px; margin-left: 5px;"/>
                                        </h:panelGroup>
                                    </h:column>
                                    
                                </h:panelGrid>
                                <p:commandLink style="margin-left:125px;" action="#{pCContactenos.enviar()}" 
                                               value="Enviar" styleClass="button1" update="index">
                                </p:commandLink>
                            </div>
                        </div>
                    </div>
                </div>
            </article>
        </h:form>

    </ui:define>    
    <ui:define name="contenido">
        <article id="content2">
            <div class="wrapper">
                <section class="pad_left1">
                    <div class="wrapper">
                        <div class="cols">
                            <h2>Nuestro Contacto</h2>
                        </div>
                        <div class="col3 pad_left1">
                            <h2>Otra Información</h2>
                        </div>
                    </div>
                    <div class="line1">
                        <div class="wrapper line2">
                            <div class="cols">
                                <div class="wrapper pad_bot1">
                                    <p>Sed ut perspiciatis unde omnis iunatus doloremque laudantium.</p>
                                    <p class="address">
                                        Calle 1 esquina Calle 2 La Paloma<br/>
                                        <span>Teléfono</span>    +1 800 559 6580<br/>
                                        <span>Reservas</span>    +1 959 603 6035<br/>
                                        <span>E-mail:</span>             <a href="mailto:">mail@mail.com</a>
                                    </p>
                                </div>
                            </div>
                            <div class="col3 pad_left1">
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                </p>
                                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error.
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </article>
    </ui:define> 
</ui:composition>